<script setup lang="ts">
import { useDepositoryDetil } from "./utils/hook";
import arrowLeft from "@iconify-icons/ep/arrow-left";
import { usePublicHooks } from "../../hooks";
import { DictTag } from "@/components/common/DictTag";

defineOptions({
  name: "WarehouseManagementDetail"
});

const { storeInfo, goBack, openDialog } = useDepositoryDetil();
const { switchStyle } = usePublicHooks();
</script>

<template>
  <div class="main" style="box-shadow: none">
    <el-card shadow="never" class="mb-3">
      <template #header>
        <div
          class="card-header flex items-center cursor-pointer"
          @click="goBack(-1)"
        >
          <IconifyIconOffline :icon="arrowLeft" class="mr-1" />
          仓库信息
        </div>
        <el-button type="primary" @click="openDialog('编辑', storeInfo)"
          >编辑</el-button
        >
      </template>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="仓库编码" prop="name">
              {{ storeInfo.depositoryCode }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="仓库名称" prop="name">
              {{ storeInfo.depositoryName }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="仓库类型" prop="name">
              <DictTag dict-type="HOUSE_TYPE" :dict-value="storeInfo?.type" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="仓库状态" prop="name">
              <el-switch
                v-model="storeInfo.status"
                :active-value="0"
                :inactive-value="1"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                :style="switchStyle"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="国家/地区" prop="name">
              {{ storeInfo.country }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="省份" prop="name">
              {{ storeInfo.province }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="市（区）" prop="name">
              {{ storeInfo.city }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="区（县）" prop="name">
              {{ storeInfo.area }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="联系人" prop="name">
              {{ storeInfo.contacts }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="联系方式" prop="name">
              {{ storeInfo.contact }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="详细地址" prop="name">
              {{ storeInfo.address }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="备注" prop="name">
              {{ storeInfo.des }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
}
:deep(.el-form-item__label) {
  color: #74714f;
}
:deep(.el-form-item__content) {
  font-weight: bold;
  color: #29281c;
}
:deep(.el-tabs__item) {
  color: #b2b08f;
}
:deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary);
}
:deep(.el-tabs__item:hover) {
  color: var(--el-color-primary);
}
:deep(.el-card__header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}
</style>
